<template>
  <div class="form-content">
    <!-- 表格查询 -->
    <div class="table-search">
      <el-form :inline="true" :model="serachItem" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="serachItem.cardNum" placeholder="请输入卡号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="serachCsInfo">查询</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="success" icon="el-icon-plus" @click="addCsInfo">新增</el-button>
        </el-form-item> -->
      </el-form>
    </div>

    <div class="form-main">
      <!-- 表头标题 -->
      <div class="tb_title">到期卡号信息</div>
      <!-- 表格 -->
      <div class="listfile">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :height="tableHeight"
          :data="tableData">
          <el-table-column prop="cardNum" label="卡号" width="160" show-overflow-tooltip></el-table-column>
          <el-table-column prop="startTime" label="卡号开启时间" width="140"></el-table-column>
          <el-table-column prop="endTime" label="到期时间" width="140"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="140"></el-table-column>
          <el-table-column prop="statusInfo" label="卡号状态" width="90"></el-table-column>
          <el-table-column prop="imei" label="IMEI" width="140"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                size="mini" type="primary" icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 分页 -->
    <div class="table_page">
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>
      </div>

    </div>

    <!-- 子组件 -->
    <expireCardModal ref="expireCardModal1" @submit="submitAddChange" :title='title_name' :historyData='addEdit_data'></expireCardModal>
  </div>
</template>

<script>
import expireCardModal from "./expireCardModal"
import { searchCardPageSize, searchCardInfo } from '@/api/cardApi'
export default {
  components: {expireCardModal},
  data() {
    return {
      tableHeight: 'calc(100vh - 296px)',
      totalCount: 0, //总条数，总共有多少条数据
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示多少条
      addEdit_data: {},
      loading: true,
      title_name: '',
      tableData: [],
      serachItem: {
        cardNum: '',
        status: 9,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
    }
  },
  methods: {
    // 新增--保存后，子传给父组件
    submitAddChange () {
      this.allFindCsInfo(); // 条件查询
    },
    //添加
    addCsInfo(){
      this.$refs.expireCardModal1.modal1 = true;
      this.title_name = '新增卡号';
      // this.$refs.expireCardModal1.addEdmitFun(); // 父调子组件的方法
    },
    //卡号查询(条件查询接口)
    serachCsInfo() {
      //回调接口
      searchCardInfo(this.serachItem).then((res)=>{
        if (res.statusCode == "200"){
          this.tableData = [];
          console.log("搜索：", res.data)
          this.tableData = res.data.content;
          this.tableData.map(v=>{
            if (v.status == 9){
              v.statusInfo = '到期'
            }
          })
          this.totalCount = res.data.total;
        }
      })
    },
    // 卡号分页查询 (查询所有)
    allFindCsInfo(){
      let _data = {
        status: 9, //查询到期卡号 9
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      //回调接口
      searchCardPageSize(_data).then((res)=>{
        console.log("查询所有:", res.data);
        if (res.statusCode == "200"){
          this.loading = false;
          this.tableData = res.data.content;
          this.tableData.map(v=>{
            if (v.status == 9){
              v.statusInfo = '到期'
            }
          })
          this.totalCount = res.data.total;
        }
      })
    },
    //编辑
    handleEdit(index, row) {
      this.addEdit_data = JSON.parse(JSON.stringify(row));
      // console.log("编辑:", index, row, this.addEdit_data);
      this.$refs.expireCardModal1.modal1 = true;
      this.title_name = '编辑卡号';
      //  this.$refs.expireCardModal1.addEdmitFun(); // 父调子组件的方法
    },
    // 分页
    handleCurrentChange(newPage) {
      this.currentPage = newPage
      // console.log("2222", newPage);
      this.loadTableData()
    },
    //每页
    handleSizeChange(val) {
      this.pageSize = val
      // console.log("1111", val);
      this.loadTableData()
    },

    //封装分页接口
    loadTableData(){
      if (this.serachItem.cardNum) {
        //调条件查询接口
        this.serachCsInfo();
      } else {
        //调查询所有的接口
        this.allFindCsInfo();
      }

    }
  },
  created(){},
  mounted(){
    this.loadTableData();
  },
  destroyed() {
    this.$destroy();
    this.tableData = [];
    this.page_Data = [];
  }
}
</script>
